<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
// 1.导入watch
import {ref, watch} from 'vue'

const count = ref(0)
const setCount = () => {
  count.value++
}

const name = ref('cp')
const changeName = () => {
  name.value ='pc'
}

// 2.调用watch侦听变化
// 监听单个值
watch(count, (newValue, oldValue)=> {
  console.log(`count发生了变化, 老值为${oldValue}, 新值为${newValue}`);
}, {
  immediate: true
})

// 监听多个值
watch([count, name], ([newCount, newName],[oldCount, oldName]) => {
  console.log(`count或者name变化了`, [newCount, newName], [oldCount, oldName]);
  
})

const state = ref({count: 0, age:10})
// 监听对象state
// watch(state, ()=>{
//   console.log('数据变化了');
// }, {deep: true})
const changeStateByCount = () => {
  state.value.count++
}

const changeStateByAge = () => {
  state.value.age++
}

// 精确侦听某个具体属性
// deep性能损耗，尽量不开启deep
watch(
  () => state.value.age,
  () => {
    console.log('age变化了')
  },
  
)


</script>

<template>
  <div>
    <button @click="setCount">修改count -- {{ count }}</button>
    <button @click="changeName">修改name -- {{ name }}</button>
    <button @click="changeStateByCount">测试deep监视--{{ state.count }}</button>
    <button @click="changeStateByAge">测试deep监视--{{ state.age }}</button>
  </div>
</template>